Theory Behind the Simulation

The sandpile model is a simple cellular automaton that illustrates self‑organized criticality. Grains of sand are added to a grid one at a time. When a cell’s grain count reaches a critical threshold (here, 4), the cell “topples,” distributing one grain to each of its four neighboring cells. This may in turn cause further topplings, leading to avalanches whose sizes follow a power‑law distribution.

Despite its simplicity, the model produces intricate, emergent patterns and is a canonical example of how local interactions can yield globally complex behavior. This simulation continuously adds sand and processes the resulting chain reactions, producing ever‑changing procedural graphics.

Code Explanation

The simulation is implemented entirely in JavaScript using an HTML5 canvas. Below is an overview of the main components:

• Grid Initialization: A 2D array represents the sandpile grid. Each cell starts with zero grains.
• Grain Addition: At each frame, a grain is added to the center cell of the grid.
• Toppling Process: When a cell’s value reaches 4 or more, it “topples” by subtracting 4 and distributing one grain to each neighbor. Multiple iterations per frame allow avalanches to form.
• Rendering: The canvas is redrawn every frame with cell colors chosen by the cell’s value modulo 4.
• Animation Loop: Using requestAnimationFrame, the simulation continuously updates and renders.

This structure ensures that all graphics are generated procedurally and the simulation continuously evolves in a visually appealing manner.